import React from "react";
import { Alert, Button, Form, Input } from 'antd';
import {connect} from 'react-redux';
import IconFont from '../../../../components/iconfont';
import hoc from "./hoc";
import Css from "../../../../assets/css/pc/member/login/login.css";
const LoginComponent =hoc((props)=>{
    return(
        <section className={Css['login']}>
            <div className={Css['loginBox']}>
                <div className={Css['loginTop']}>
                    <img src={require('../../../../assets/images/common/LOGO.png').default} alt=""/>
                </div>
                <div className={Css['loginBottom']}>
                    <div className={Css['loginAlert']}>
                        <Alert
                            description="如果之前使用第三方账号登录过，请先点击下方第三方账号登录，再进行绑定哦～"
                            type="warning"
                            closable
                            banner
                            showIcon={false}
                        />
                    </div>
                    <div className={Css['loginForm']}>
                        <Form
                            name="basic"
                            form={props.form}
                            onFinish={props.onFinish}
                            autoComplete="off"
                        >
                            <Form.Item
                                name="username"
                                rules={[
                                    { required: true, message: '请输入用户名' },
                                    {
                                        validator:props.handleCheckPwd.bind(this,'username')
                                    }
                                ]}
                                validateTrigger= 'onBlur'
                            >
                                <Input placeholder="请输入用户名"/>
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: "请输入密码",
                                    },
                                    {
                                        validator:props.handleCheckPwd.bind(this,'password')
                                    }
                                ]}
                            >
                                <Input.Password placeholder="请输入密码"/>
                            </Form.Item>
                            <Form.Item shouldUpdate>
                                {()=>{

                                    return <Button
                                        type="primary"
                                        htmlType="submit"
                                        className={Css['loginFormButton']}
                                        disabled={
                                            !props.form.isFieldsTouched(true) ||
                                            !!props.form.getFieldsError().filter(({ errors }) => errors.length).length ||
                                            props.isDisabled
                                        }
                                        loading={props.isLoading}
                                    >
                                        登录
                                    </Button>
                                }}
                            </Form.Item>
                        </Form>
                    </div>
                    <div className={Css['thirdLogin']}>
                        <div className={Css['thirdLoginRow']}>
                            <div className={Css['thirdLoginLabel']}>第三方账号登录</div>
                            <div className={Css['thirdLoginList']} onClick={props.thirdLogin.bind(this,'github')} >
                                <IconFont  className={Css["loginIcn"]} type="icon-gatmgrgithub"  />
                            </div>
                            <div className={Css['thirdLoginList']}  onClick={props.thirdLogin.bind(this,'gite')}>
                                <IconFont  className={Css["loginIcn"]} type="icon-gatmgrgitee"  />
                            </div>
                        </div>
                        <div className={Css['thirdLoginRow']}>
                            <div className={Css['thirdLoginLabel']}>微信账号登录 <span>（仅限微信用户使用）</span></div>
                            <div className={Css['thirdLoginList']}>
                                <IconFont  className={Css["loginIcn"]} type="icon-gatmgrweixin"  />
                            </div>
                        </div>
                    </div>
                    <div className={Css['loginFooter']}>
                        <div className={Css['loginFooterList']}>找回密码</div>
                        <div className="line"></div>
                        <div className={Css['loginFooterList']} onClick={props.goPage.bind(this,'register')}>快速注册</div>
                    </div>
                </div>
            </div>
        </section>
    )
})
export default connect((state)=>{
    return{
        state:state
    }
})(LoginComponent)